<script setup lang="ts">
import { getProductCardListServer, getProductList} from "@/api/product";
import {getUrlParams} from "@/utils";
import seo from "@/utils/seo";
import {getSeoInfoServer, getWebBanner} from "@/api/common";

const list = ref([])
const currentTabId = ref()
const currentTabVal = ref({})
const advantageCardList = ref([])
const currentDetailId = ref(1)
const currentDetailVal = ref({})
const seoInfo = ref({...seo,title:'数据安全_产品中心_华途信息'})
const getSeo = async ()=>{
  const {data} =await getSeoInfoServer("/product")
  seoInfo.value = {...data}
}
getSeo()
const BannerInfo = ref({
  imageOrVideo: '',
  intro: '',
  title: '',
  caseIntroList: '',
})
const getBanner = async () => {
  const {data} = await getWebBanner(7)
  if (data) {
    BannerInfo.value = data
  }
}
const setTab = (val: { [x: string]: { id: number; }[]; id?: any; }) => {
  currentTabVal.value = val
  currentTabId.value = val.id
  currentDetailVal.value = val['productDetailsList'][0]
  currentDetailId.value = val['productDetailsList'][0].id
}

const setDetailInfo = (val: { id: number; label: string; }) => {
  currentDetailVal.value = val
  currentDetailId.value = val.id
}

const getAdvantageCardList = async () => {
  const {data} = await getProductCardListServer()
  // console.log(data)
  advantageCardList.value = data
}
const getPageProductList = async (type: string|null) => {
  const {data} = await getProductList()
  // 如果有type就跳转到底部并切换到第index个(下标)
  if (data.length) {
    list.value = data
    if (type) {
      const v = data.filter((i: { id: string; }) => {
        return i.id == type
      })
      if (v.length) {
        currentTabVal.value = v[0]
        currentDetailVal.value = v[0]['productDetailsList'][0]
      }
     setTimeout(()=>{
       scrollTo()
     },100)
    } else {
      currentTabVal.value = data[0]
      currentDetailVal.value = data[0]['productDetailsList'][0]
    }

  }

}
const scrollTo = ()=>{
  let demos = document.querySelector('.ht-product-demos') as HTMLElement
  document.documentElement.style.scrollBehavior = 'smooth';
  window.scrollTo(0,demos.getBoundingClientRect().y)
}

onActivated(() => {
  getPageProductList(getUrlParams('type'))

})
getAdvantageCardList()
getBanner()
</script>
<template>
  <div class="ht-product">
    <Head>
      <Title>{{ seoInfo.title}}</Title>
      <Meta name="description" :content="seoInfo.description"/>
      <Meta name="keywords" :content="seoInfo.keyword"/>
    </Head>
    <div class="ht-product-top">
      <div class="banner-container">
        <BannerMedia  :url="BannerInfo.imageOrVideo"/>
      </div>
      <div class="top-title">{{BannerInfo.title}}</div>
      <div class="top-subtitle">{{BannerInfo.intro}}</div>
    </div>
    <div class="ht-product-advantage">
      <div class="ht-product-advantage-title">为什么选择华途数据安全</div>
      <div class="ht-product-advantage-cards">
        <div class="ht-product-advantage-cards-item" v-for="item in advantageCardList" :key="item.id">
          <div class="title">{{ item.title }}</div>
          <div class="desc">{{ item.intro }}</div>
          <img :src="item.image" alt="">
        </div>
      </div>
    </div>
    <div class="ht-product-demos">
      <div class="ht-product-demos-title">网络安全产品</div>
      <div class="ht-product-demos-tabs">
        <div class="ht-product-demos-tab " :class="currentTabVal.id===item.id?'active':''" v-for="(item,index) in list"
             :key="item.id" @click="setTab(item)">
          <img :src="item.icon">
          <span>{{ item.title }}</span>
        </div>
      </div>
      <div class="ht-product-demos-body">
        <div class="demos-left">
          <div class="title">{{ currentTabVal.title }}</div>
          <div class="list">
            <div class="item" :class="currentDetailVal.id===item.id?'active':''"
                 v-for="(item,index) in currentTabVal.productDetailsList"
                 :key="item.id" @mouseenter="setDetailInfo(item)"
                 v-aos="['animate__fadeInUp']" :data-aos-delay="0.1*index+'s'" data-aos-duration="1s"
            >
              <NuxtLink :to="'/product/'+currentDetailVal.id">
                {{ item.title }}
              </NuxtLink>
            </div>
          </div>
        </div>
        <div class="demos-right">
          <NuxtLink :to="'/product/'+currentDetailVal.id">
            <img :src="currentDetailVal.productImage" alt="">
          </NuxtLink>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.ht-product {
  &-top {
    width: 24rem;
    height: 10.5rem;
    //background: url(~/assets/images/product/product-top-bg.jpg) no-repeat;
    //background-size: 24rem 10.5rem;
    text-align: center;
    color: #FFFFFF;
    padding-top: 0.1px;
    position: relative;
    .banner-container {
      z-index: -1;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
    }

    .top-title {
      margin-top: 4.38rem;
      font-size: 0.8rem;
      font-weight: bold;
    }

    .top-subtitle {
      margin-top: 0.06rem;
      font-size: 0.33rem;
      font-weight: 400;
    }
  }

  &-advantage {
    width: 24rem;
    height: 22.83rem;
    background: #F5F7FA;
    padding: 1.91rem 2.34rem 1.61rem 2.34rem;

    &-title {
      font-size: 0.57rem;
      font-weight: bold;
      text-align: center;
      margin-bottom: 0.96rem;
    }

    &-cards {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;

      &-item {
        width: 9.25rem;
        height: 8.13rem;
        background: #FFFFFF;
        border-radius: 0.19rem;
        padding: 0.55rem 0.81rem;
        justify-content: space-between;
        margin-right: 0.8rem;
        margin-bottom: 1.15rem;

        &:hover {
          box-shadow: 0 0.04rem 0.34rem 0.01rem rgba(46, 106, 255, 0.12);
        }

        &:nth-child(2n) {
          margin-right: 0;
        }

        .title {
          margin-bottom: 0.33rem;
          font-size: 0.4rem;
          font-weight: bold;
          color: #111111;
        }

        .desc {
          width: 7.84rem;
          height: 1.2rem;
          font-size: 0.33rem;
          font-weight: 500;
          color: #999999;
        }

        img {
          display: block;
          width: 4.96rem;
          height: 4.96rem;
          object-fit: scale-down;
          margin: auto;

          &:nth-child(2) {
            width: 4.75rem;
            height: 4.587rem;
          }

          &:nth-child(3) {
            width: 6.76rem;
            height: 4.5rem;
          }

          &:nth-child(4) {
            width: 6.75rem;
            height: 4.75rem;
          }
        }
      }
    }


  }

  &-demos {
    height: 15.11rem;
    padding: 1.83rem 3.68rem 1.2rem 3.68rem;
    background: #fff;

    &-title {
      text-align: center;
      font-size: 0.57rem;
      font-weight: bold;
      margin-bottom: 0.81rem;
    }

    &-tabs {
      display: flex;
    }

    &-tab {
      width: 3.98rem;
      height: 1.54rem;
      background: #FFFFFF;
      box-shadow: 0 0.04rem 0.34rem 0.01rem rgba(46, 106, 255, 0.12);
      border-radius: 0.13rem;
      margin-right: 0.25rem;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 2;
      cursor: pointer;
      border-bottom: 0.08rem solid transparent;
      transition: all 0.5s;
      font-size: 0.3rem;

      &.active {
        background-size: 3.975rem 0.2125rem;
        border-color: #2e6aff;
      }

      img {
        width: 0.656rem;
        margin-right: 0.25rem;
      }

      &:last-child {
        margin-right: 0;
      }
    }

    &-body {
      margin-top: 1.41rem;
      display: flex;
      justify-content: space-between;

      .demos-left {
        width: 4.5rem;

        .title {
          font-size: 0.45rem;
          font-weight: bold;
          color: #111111;
        }

        .list {
          margin-top: 0.74rem;
          font-size: 0.25rem;
          font-weight: 400;
          color: #999999;

          .item {
            padding-left: 0.34rem;
            position: relative;
            cursor: pointer;
            margin-bottom: 0.4rem;

            &.active {
              color: #111;

              &::after {
                background: #2E6AFF;
              }
            }

            &:hover {
              color: #111;

              &::after {
                background: #2E6AFF;
              }
            }

            &::after {
              position: absolute;
              content: '';
              width: 0.09rem;
              height: 0.09rem;
              background: #999;
              border-radius: 1rem;
              left: 0;
              top: 0.13rem;
            }
          }
        }
      }

      .demos-right {
        img {
          max-width: 10.94rem;
          max-height: 8.7rem;
          object-fit: cover;
        }
      }

    }
  }
}
</style>

